const path = require('path');
const webpack = require('webpack');
const {merge} = require('webpack-merge');
const commonConfig = require('./webpack.common');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

const devConfig = {
  mode: 'development',
  //eval直接加载js文件末尾，cheap-source-map--不显示源码 ，source-map--显示源码 ，modulez只显示行不显示列
  devtool: 'eval-cheap-module-source-map',
  devServer: {
    contentBase: './dist',
    port: 3010,
    host: '0.0.0.0',
    // open: true,
    hot: true,
    // historyApiFallback: true
    // hotOnly: true
    proxy: {
      '/api/*': {
          target: 'http://10.0.0.4:8080',
          pathRewrite: {
              // '^/api': ''
              
          }
    }
  } 
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.css$/i,
        use:['style-loader', 'css-loader','postcss-loader']
      },
      {
        test: /\.less$/,
        use: [
          'style-loader', 
          'css-loader',
          'postcss-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
                modifyVars: {
                  'primary-color': '#1DA57A',
                  'link-color': '#1DA57A',
                  'border-radius-base': '2px',
                },
                javascriptEnabled: true,
              },
            },
          },
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new AddAssetHtmlWebpackPlugin({
      // 将编译后的文件挂在到页面上
      filepath: path.resolve(__dirname, './dll/vendors.dll.js')
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, './dll/vendors.manifest.json')
    }),
  ],
}

module.exports = merge(devConfig, commonConfig);